<!-- 重写了价格维护相关页面，暂时不使用，使用经销商Saas中相同页面，此页面作为借鉴，待最终确认废弃时再删除 -->
<template>
  <div class="price-maintenance">
    <el-container class="container-box">
      <el-header height="auto">
        <!-- 搜索模块 -->
        <SearchForm
          label-width="70px"
          :data="consignmentSearchForm"
          @searchForm="searchForm"
          @resetForm="resetForm"
          @focuskey="focusKey"
          @remoteMethod="remoteMethod"
          :submit-loading='submitLoading'
        />
      </el-header>
      <!-- 表格模块 -->
      <el-editable
        ref="productTable"
        v-loading="tableLoading"
        :data="productList"
        height="400"
        :custom-attr="$TABLE_HEAD['before-Settle.distributorSide.price']"
        :columns="consignmentProductColumns"
      >
        <template
          slot="default-generalPrice"
          slot-scope="scope">
          <el-input
            style="width: 100px;"
            v-if="priceEditStatus[scope.row.id]"
            v-model="scope.row.generalPrice"
          />
          <span v-else>{{ scope.row.generalPrice }}</span>
          <el-button
            size="small"
            type="text"
            v-if="priceEditStatus[scope.row.id]"
            :loading="priceSubmitLoading[scope.row.id]"
            @click="submitPriceChange(scope.row)"
          >确定</el-button>
          <el-button
            v-else
            size="small"
            type="text"
            @click="editPrice(scope.row)"
          >编辑</el-button>
        </template>
        <template
          slot="default-promotionPrice"
          slot-scope="scope">
          <el-input
            style="width: 100px;"
            v-if="promotionEditStatus[scope.row.id]"
            v-model="scope.row.promotionPrice"
          />
          <span v-else>{{ scope.row.promotionPrice }}</span>
          <el-button
            size="small"
            type="text"
            v-if="promotionEditStatus[scope.row.id]"
            :loading="promotionSubmitLoading[scope.row.id]"
            @click="submitPromotionChange(scope.row)"
          >确定</el-button>
          <el-button
            v-else
            size="small"
            type="text"
            @click="editPromotion(scope.row)"
          >编辑</el-button>
        </template>
        <template
          slot="default-isPromoted"
          slot-scope="scope"
        >
          <el-switch
            v-model="scope.row.isPromoted"
          />
        </template>
        <template
          slot="default-action"
          slot-scope="scope">
          <el-button
            size="small"
            @click.stop="jumpConfigPage(scope.row)"
            type="text text-primary">销售价格设置</el-button>
        </template>
      </el-editable>
      <!-- 分页模块 -->
      <el-pagination
        class="pagination"
        align="right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="curPage"
        :page-sizes="PAGE_NUMBER"
        :page-size="pageSize"
        :layout="PAGINATION_LAYOUT"
        :total="totalElements"
      />
    </el-container>
  </div>
</template>
<script>
import ElEditable from '@components/el-editable/index.vue'
import SearchForm from '@components/businesscomponents/search'
import { PAGE_NUMBER, PAGINATION_LAYOUT } from '@const/common.js'
import { consignmentProductColumns, consignmentSearchForm } from './const'
export default {
  components: {
    ElEditable, SearchForm
  },
  data () {
    return {
      consignmentProductColumns,
      consignmentSearchForm,
      searchQuery: {},
      tableLoading: false,
      productList: [],
      priceEditStatus: {}, // 用于记录每一行是否正在编辑价格
      priceSubmitLoading: {}, // 用于记录每一行提交价格的loading状态
      promotionEditStatus: {}, // 用于记录每一行是否正在编辑促销价
      promotionSubmitLoading: {}, // 用于处理每一行提交促销价时的loading状态
      curPage: 1,
      PAGE_NUMBER,
      PAGINATION_LAYOUT,
      pageSize: PAGE_NUMBER[0],
      totalElements: 0,
      submitLoading: false
    }
  },
  watch: {
    'productList.length' () { // 初始化priceEditStatus和priceSubmitLoading，否则不会响应
      this.productList.map(item => {
        this.$set(this.priceEditStatus, item.id, false)
        this.$set(this.priceSubmitLoading, item.id, false)
        this.$set(this.promotionEditStatus, item.id, false)
        this.$set(this.promotionSubmitLoading, item.id, false)
      })
    }
  },
  mounted () {
    this.getProductList()
  },
  methods: {
    getProductList () {
      this.submitLoading = true
      this.productList = [
        {
          productCode: 'XH3283823',
          productName: '测试产品名称一',
          productSpec: 'KG20*1',
          factory: '河南卫龙医疗器械有限公司',
          certificateNo: '国械注准20153460582',
          category: '口腔',
          unit: '个',
          purchasePrice: 100,
          generalPrice: 188.34,
          promotionPrice: 123,
          isPromoted: true
        },
        {
          productCode: 'XH328113',
          productName: '测试产品名称二',
          productSpec: 'KG30*1',
          factory: '河南卫龙医疗器械有限公司',
          certificateNo: '国械注准20153462312',
          category: '口腔',
          unit: '个',
          purchasePrice: 100,
          generalPrice: 188.34,
          promotionPrice: 123,
          isPromoted: false
        }
      ]
      this.submitLoading = false
    },
    searchForm (condition) {
      this.curPage = 1
      this.searchQuery = condition
      this.getProductList()
    },
    resetForm (condition) {
      this.curPage = 1
      this.searchQuery = condition
      this.getProductList()
    },
    focusKey () {},
    remoteMethod () {},
    handleSizeChange (size) {
      this.pageSize = size
      this.getProductList()
    },
    handleCurrentChange (curPage) {
      this.curPage = curPage
      this.getProductList()
    },
    editPrice (row) {
      this.$set(this.priceEditStatus, row.id, !this.priceEditStatus[row.id])
    },
    submitPriceChange (row) {
      this.priceSubmitLoading[row.id] = true
      this.$axios.post('#', {
        id: row.id,
        generalPrice: row.generalPrice
      })
        .then(({ data }) => {})
        .catch(e => {})
        .finally(() => {
          this.priceSubmitLoading[row.id] = false
        })
    },
    editPromotion (row) {
      this.$set(this.promotionEditStatus, row.id, !this.promotionEditStatus[row.id])
    },
    submitPromotionChange (row) {
      this.promotionSubmitLoading[row.id] = true
      this.$axios.post('#', {
        id: row.id,
        promotionPrice: row.promotionPrice
      })
        .then(({ data }) => {})
        .catch(e => {})
        .finally(() => {
          this.promotionSubmitLoading[row.id] = false
        })
    },
    jumpConfigPage (row) {
      const path = '/distributorSide/basicInfoManagement/price/setting'
      const query = {
        id: row.id
      }
      this.$router.push({ path, query })
    }
  }
}
</script>
